<template>
    <div class="add-dialog">
        <div class="title">{{ dialogTitle }}</div>
        <div class="input">
            <input type="text" v-model="name" maxlength="12" ref="proTitle" v-if="isEdit">
            <input type="text" v-model="title" maxlength="12" ref="proTitle" v-else>
            <span class="number">{{title.length}}/12</span>
        </div>
        <dialog-button-click @btnClick="onDialogBtnClick"/>
    </div>
</template>

<script>
    import DialogButtonClick from './DialogButtonClick';

    export default {
        name: 'DialogAddView',
        components: {DialogButtonClick},
        props: [
            'data',
            'isEdit',
            'dialogTitle'
        ],
        data() {
            return {
                title: '',
                name: this.data ? this.data.name.replace('.' + this.data.suffix, '') : '',
            }
        },
        mounted() {
            setTimeout(() => {
                this.$refs.proTitle.focus()
            },100)
        },
        methods: {
            onDialogBtnClick(type) {
                if(this.isEdit) {
                    this.$emit('callback', type, this.name);
                } else {
                    this.$emit('callback', type, this.title);
                }
            }
        },
    }
</script>

<style scoped>
    .add-dialog {
        width: 75%;
        height: 300px;
        background: #FFFFFF;
        box-shadow: 0 19px 20px 0 rgba(0, 0, 0, 0.05);
        border-radius: 40px;
        margin: 300px auto 0;
        padding: 0 70px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .input {
        height: 60px;
        background: #DCFBFF;
        border-radius: 30px;
        border: none;
        display: flex;
        padding: 0 30px;
        align-items: center;
    }
    input {
        height: 100%;
        background: #DCFBFF;
        border-radius: 30px;
        border: none;
        flex: 1;
        outline: none;
    }
    .number {
        font-size: 18px;
        font-weight: normal;
        color: #000000;
        opacity: 0.4;
    }
    .title {
        font-size: 26px;
    }

</style>